<template>
  <div>
    <h2>管理员列表</h2>
    <div class="main">
      <div class="top">
        <div class="choose">
          <span>状态:</span>
          <select name="" id="sel" v-model="statu">
            <option value="none" selected disabled hidden>请选择</option>
            <option value="all">全部</option>
            <option value="open">开启</option>
            <option value="close">关闭</option>
          </select>
        </div>
        <div class="center">
          <span>搜索:</span>
          <input type="text" placeholder="请输入姓名或者账号" v-model="name" />
          <button @click="search">
            <i class="el-icon-search"></i>
          </button>
        </div>
      </div>
      <button class="btn" @click="dialogTableVisible = true">添加管理员</button>

      <el-dialog title="管理员添加" :visible.sync="dialogTableVisible">
        <el-form :model="form2">
          <el-form-item label="管理员账号" :label-width="formLabelWidth">
            <el-input v-model="form2.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="管理员密码" :label-width="formLabelWidth">
            <el-input v-model="form2.pwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" :label-width="formLabelWidth">
            <el-input v-model="form2.surePwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="管理员姓名" :label-width="formLabelWidth">
            <el-input v-model="form2.realName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="管理员电话" :label-width="formLabelWidth">
            <el-input v-model="form2.phone" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="管理员身份" :label-width="formLabelWidth">
            <el-select v-model="form2.region">
              <el-option
                :label="item.roleName"
                :value="item.roleName"
                v-for="item in systemData"
                :key="item._id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="管理员身份">
            <el-select
              multiple
              filterable
              allow-create
              default-first-option
              v-model="form2.region"
              placeholder="请选择活动区域"
            >
              <!-- <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option> -->
              <el-option
                :label="item.roleName"
                :value="item.roleName"
                v-for="item in systemData"
                :key="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" :label-width="formLabelWidth">
            <el-radio v-model="radio2" :label="true">开启</el-radio>
            <el-radio v-model="radio2" :label="false">关闭</el-radio>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser" style="width: 100%"
            >提交</el-button
          >
        </div>
      </el-dialog>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="realName" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="account" label="账号"> </el-table-column>
        <el-table-column prop="roles[0].roleName" label="身份">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="最后一次登录时间"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="phone" label="最后一次登录ip"> </el-table-column>
        <el-table-column prop="status" label="开启">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="true"
                :inactive-value="false"
                @change="update(scope.row)"
              >
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column width="250" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="openModel(scope.row)"
              >编辑</el-button
            >

            <el-dialog title="管理员修改" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="管理员账号" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="管理员密码" :label-width="formLabelWidth">
                  <el-input v-model="form.pwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.surePwd"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="管理员姓名" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.username"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="管理员身份" :label-width="formLabelWidth">
                  <el-select v-model="form.region">
                    <el-option
                      :label="item.roleName"
                      :value="item.roleName"
                      v-for="item in tableData[0].roles"
                      :key="item._id"
                    ></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="管理员身份">
                  <el-select
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    v-model="form.region"
                    placeholder="请选择活动区域"
                  >
                    <!-- <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option> -->
                    <el-option
                      :label="item.roleName"
                      :value="item.roleName"
                      v-for="item in systemData"
                      :key="item._id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态:" :label-width="formLabelWidth">
                  <el-radio v-model="radio" :label="true">开启</el-radio>
                  <el-radio v-model="radio" :label="false">关闭</el-radio>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button
                  type="primary"
                  @click="updateMessage(scope.row)"
                  style="width: 100%"
                  >提交</el-button
                >
              </div>
            </el-dialog>
            <el-button size="mini"  v-auth="['经销商']" @click="handleEdit(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Input } from "element-ui";
export default {
  data() {
    return {
      tableData: [],
      systemData: [],
      statu: "none",
      name: null,
      radio: "",
      radio2: true,
      currentPage: 1,
      pageSize: 1,
      total: 30,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        pwd: "",
        surePwd: "",
        username: "",
        type: [],
        region: [],
        roles:[]
      },
      form2: {
        account: "",
        pwd: "",
        surePwd: "",
        realName: "",
        type: [],
        region: [],
        phone: "",
        roles: [],
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    async handleEdit(_id) {
      let { data: res } = await this.$http.user.delUser({ _id });
      console.log(res);
      this.fetchData();
    },
    async fetchData(val) {
      let elem = {
        page: this.currentPage,
        limit: this.pageSize,
      };
      if (val) {
        elem = { ...val, ...elem };
      }
      let res = await this.$http.user.findAllUser(elem);
      let { data: req } = await this.$http.user.findSystemUser();
      console.log(req);
      this.systemData = req.data;

      this.total = res.data.total;

      this.tableData = res.data.data;
      console.log(res);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      switch (this.statu) {
        case "none":
          this.fetchData();
          break;
        case "all":
          this.fetchData();
          break;
        case "open":
          this.fetchData({ status: true });
          break;
        case "close":
          this.fetchData({ status: false });
          break;
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      switch (this.statu) {
        case "none":
          this.fetchData();
          break;
        case "all":
          this.fetchData();
          break;
        case "open":
          this.fetchData({ status: true });
          break;
        case "close":
          this.fetchData({ status: false });
          break;
      }
    },
    search() {
      if (this.statu == "none" || this.statu == "all") {
        this.fetchData({ realName: this.name });
      } else if (this.statu == "open") {
        this.fetchData({ status: true, realName: this.name });
      } else {
        this.fetchData({ status: false, realName: this.name });
      }
      this.name = null;
    },
    openModel(val) {
      this.dialogFormVisible = true;
      console.log(val);
      this.form.name = val.account;
      this.form.username = val.realName;
      this.form.region = val.roles[0].roleName;
      this.radio = val.status;
    },
    async update(val) {
      console.log(val);
      let res = await this.$http.user.updateUser(val);
      console.log(res);
    },
    async updateMessage(val) {
      if (
        this.form.pwd &&
        this.form.surePwd &&
        this.form.pwd == this.form.surePwd
      ) {
        val.pwd = this.form.pwd;
        val.account = this.form.name;
        val.realName = this.form.username;
        val.status = this.radio;
        let obj = this.systemData.filter((item) =>
          this.form.region.find((element) => item.roleName == element)
        );
        obj.forEach((item) => this.form.roles.push(item._id));
        val.roles=this.form.roles
        console.log(val);
        let res = await this.$http.user.updateUser(val);
        console.log(res);
        this.dialogFormVisible = false;
        this.form.pwd = "";
        this.form.surePwd = "";
      } else {
        alert("密码不正确");
      }
      //
    },
    async addUser() {
      if (
        this.form2.pwd &&
        this.form2.surePwd &&
        this.form2.pwd == this.form2.surePwd
      ) {
        delete this.form2.surePwd;
        delete this.form2.type;
        this.form2.status = this.radio2;

        let obj = this.systemData.filter((item) =>
          this.form2.region.find((element) => item.roleName == element)
        );
        obj.forEach((item) => this.form2.roles.push(item._id));
        delete this.form2.region;

        let res = await this.$http.user.addUser(this.form2);
        this.fetchData();
        this.dialogTableVisible = false;
        // for (let key in this.form2) {

        //   this.form2[key] = "";

        // }
        this.radio2 = true;
        console.log(res);
      }
    },
  },
  created() {
    this.fetchData();
  },
  watch: {
    statu: {
      handler(newVal) {
        switch (newVal) {
          case "all":
            this.fetchData();
            break;
          case "open":
            this.fetchData({ status: true });
            break;
          case "close":
            this.fetchData({ status: false });
            break;
        }
      },
    },
    // searchName:{
    //     handler(newVal){

    //     }
    // }
  },
};
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .top {
    display: flex;
    margin-bottom: 40px;
    .choose {
      #sel {
        width: 200px;
        height: 40px;
        margin-left: 10px;
        margin-right: 30px;
      }
    }
    .center {
      span {
        margin-right: 20px;
      }
      input {
        height: 40px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-radius: 4px 0 0 4px;
        outline: none;
      }
      button {
        height: 40px;
        width: 40px;
        border: none;
        background-color: blue;
        border-radius: 0 4px 4px 0;
        i {
          color: white;
        }
      }
    }
  }
  .btn {
    width: 100px;
    height: 50px;
    background-color: blue;
    color: white;
    border: none;
  }
}
</style>